<div class="container-fluid" ng-show="detailId=='0'">
  <div class="card card-query">
    <div class="content">
      <div class="row">
        <div class="col-md-6">
          <h4 class="title">开始时间</h4>
          <div class="input-daterange input-group form-group">
            <input type="text" class="form-control" ng-model="queryParams.startedAfter" datetime-picker/>
            <span class="input-group-addon">
              <i class="fa fa-exchange"></i>
            </span>
            <input type="text" class="form-control" ng-model="queryParams.startedBefore" datetime-picker/>
          </div>
        </div>
         <div class="col-md-6">
           <h4 class="title">是否完成</h4>
            <div class="form-group">
            <select class="form-control" ng-model="queryParams.finished">
              <option value="">全部</option>
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </div>
      </div>
      <div class="row">
      <div class="col-md-6">
          <h4 class="title">结束时间</h4>
          <div class="input-daterange input-group form-group">
            <input type="text" class="form-control" ng-model="queryParams.finishedAfter" datetime-picker/>
            <span class="input-group-addon">
              <i class="fa fa-exchange"></i>
            </span>
            <input type="text" class="form-control" ng-model="queryParams.finishedBefore" datetime-picker/>
          </div>
        </div>
       
        <div class="col-md-6">
          <h4 class="title">流程定义</h4>
          <div class="input-group form-group">
            <select class="form-control" chosen  ng-model="queryParams.processDefinitionId" placeholder-text-single="'选择流程定义'" no-results-text = "'没有结果匹配'">
                <option value="">全部</option>
                <option ng-repeat="option in definitions" value="{{option.id}}">{{option.name+' (v'+option.version+')'}}</option>
            </select>
            <span class="input-group-btn">
                <button type="button" class="btn btn-info" ng-click="queryInstance()">搜索</button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>  
  <div class="card">
    <div class="content">
      <table ng-table="tableOptions" class="table table-striped ng-table">
      </table>
    </div>
  </div>
</div>

<div class="container-fluid" ng-if="detailId!='0'">
  <div class="card card-detail">
    <div class="header">
      <h4 class="title">
        <span class="text-info right-split">{{selectedItem.processDefinitionName}}</span>{{selectedItem.id}}
        <button type="button" class="btn btn-warning pull-right" ng-click="gotoList()">返回列表</button>
      </h4>
    </div>
    <div class="content">
      <div class="row">
        <div class="col-md-10">
           <span class="property"><label>ID:</label>{{selectedItem.id}}</span>
           <span class="property"><label>业务标识:</label>{{selectedItem.businessKey}}</span>
           <span class="property"><label>名称:</label>{{selectedItem.processDefinitionName}}</span>
           <span class="property"><label>开始时间:</label>{{selectedItem.startTime}}</span>
           <span class="property"><label>启动人:</label>{{selectedItem.startUserName}}</span>
           <span class="property"><label>启动节点:</label>{{selectedItem.startActivityId}}</span>
           <div ng-if="selectedItem.endTime != null">
             <span class="property"><label>结束时间:</label>{{selectedItem.endTime}}</span>
             <span class="property"><label>状态:</label>结束</span>
           </div>
           <div ng-if="selectedItem.endTime == null">
             <span class="property"><label>状态:</label>{{selectedItem.suspended?'挂起':'激活'}}</span>
           </div>
           <span class="property">
           	 <label>流程定义:</label>
           	 <a ui-sref="main.flow.definition({id:selectedItem.processDefinitionId})">
           	 	<i class="fa fa-search-plus"></i> {{selectedItem.processDefinitionId}}
          	 </a>
           </span>
           <span class="property">
             <label>父级实例ID:</label>
             <a ui-sref="main.flow.instance({id:selectedItem.superProcessInstanceId})" ng-show="selectedItem.superProcessInstanceId != null">
           	 	<i class="fa fa-search-plus"></i> {{selectedItem.superProcessInstanceId}}
          	 </a>
           </span>
           <span class="property"><label>删除理由:</label>{{selectedItem.deleteReason}}</span>
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-info btn-block" ng-click="switchStaus(selectedItem.id,false)" ng-show="!selectedItem.suspended&&selectedItem.endTime == null">挂起</button>
          <button type="button" class="btn btn-info btn-block" ng-click="switchStaus(selectedItem.id,true)" ng-show="selectedItem.suspended&&selectedItem.endTime == null">激活</button>
          <button type="button" class="btn btn-danger btn-block" ng-click="deleteInstance(selectedItem)">删除</button>
        </div>
      </div>
    </div>
  </div>
  <div class="card card-detail">
    <div class="content">
      <div class="nav-tabs-navigation">
        <div class="nav-tabs-wrapper">
          <ul uib-tabset active="active" type="tabs">
              <uib-tab index="0" heading="流程图"></uib-tab>
              <uib-tab index="1" heading="任务列表" select="queryTask(selectedItem.id)"></uib-tab>
              <uib-tab index="2" heading="变量列表" select="queryVariable(selectedItem.id)"></uib-tab>
              <uib-tab index="3" heading="子流程" select="queryChildInstance(selectedItem.id)"></uib-tab>
          </ul>
        </div>
      </div>
      <div class="tab-content">
          <div class="tab-pane text-center" ng-class="{'active':active==0}">
            <img ng-src="{{getImageUrl(detailId)}}" />
          </div>
          <div class="tab-pane" ng-class="{'active':active==1}">
            <table ng-table="taskTableOptions" class="table table-striped ng-table">
            </table>
            <br/>
          </div>
          <div class="tab-pane" ng-class="{'active':active==2}">
            <table ng-table="variableTableOptions" class="table table-striped ng-table">
            </table>
            <br/>
            <button type="button" class="btn btn-info btn-block" ng-click="createVariable(selectedItem.id)" ng-if="selectedItem.endTime == null">添加变量</button>
          </div>
          <div class="tab-pane" ng-class="{'active':active==3}">
            <table ng-table="childrenTableOptions" class="table table-striped ng-table">
            </table>
            <br/>
          </div>
      </div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="instance-delete.html">
  <div class="form-group">
    <label class="control-label">流程名称</label> 
  	<input type="text" class="form-control" ng-model="formData.name" readonly></input>
  </div>
  <div class="form-group">
  	<label class="control-label">包括历史数据</label> 
	<div>
		<label class="radio-inline"> 
			<input ng-icheck type="radio" ng-model="formData.cascade" ng-value="true" /> 是
		</label>
		<label class="radio-inline"> 
			<input ng-icheck type="radio" ng-model="formData.cascade" ng-value="false" ng-checked="true" /> 否
		</label>
	</div>
  </div>
  <div class="form-group">
  	<label class="control-label">删除理由</label> 
	<textarea class="form-control" ng-model="formData.deleteReason" rows="3"></textarea>
  </div>
</script>


<script type="text/ng-template" id="variable-create.html">
  <div class="form-group">
    <label class="control-label">变量名称</label> 
  	<input type="text" class="form-control" ng-model="formData.name"></input>
  </div>
  <div class="form-group">
  	<label class="control-label">变量类型</label> 
	<select class="form-control" ng-model="formData.type" ng-init="formData.type='string'">
      <option value="string">string</option>
      <option value="boolean">boolean</option>
      <option value="date">date</option>
      <option value="double">double</option>
      <option value="long">long</option>
      <option value="integer">integer</option>
      <option value="short">short</option>
      <option value="list">list</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label">变量值</label> 
  	<input type="text" class="form-control" ng-model="formData.value"></input>
  </div>
</script>